<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <block name="style">
        <link rel="stylesheet" href="__MYCSS__/main.min.css">
    </block>
</head>
<extend name="Public/base" />
<block name="body">

    <body>
        <ol class="breadcrumb">
            <li><a href="#">商务管理</a></li>
            <li class="active">成本收入对应表</li>
        </ol>
        <p>
            <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">查询</a>
            <!--<button type="button" class="btn btn-default" data-toggle="modal" data-target="#addModal">添加</button>-->
        </p>
        <div class="collapse" id="collapseExample">
            <div class="well">
                <div class="row">
                    <div class="col-lg-2">
                        <div class="form-group">
                            <label for="exampleInputName2">客户名称：</label>
                            <select class="form-control" name="khmc" id="khmc">
                                    <option value="">--请选择--</option>
                                    <volist name="khmc_arr" id="khmc">
                                        <option value="{$khmc}">{$khmc}</option>
                                    </volist>
                                </select>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <label for="exampleInputName2" name="yyslx" id="yyslx">运营商类型：</label>
                            <select class="form-control">
                                <option value="">--请选择--</option>
                                <volist name="yyslx_arr" id="yyslx">
                                        <option value="{$yyslx}">{$yyslx}</option>
                                </volist>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <label for="exampleInputName2" name="ywqy" id="ywqy">业务区域：</label>
                            <select class="form-control">
                                <option value="">--请选择--</option>
                                <volist name="ywqy_arr" id="ywqy">
                                    <option value="{$ywqy}">{$ywqy}</option>
                                </volist>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-1">
                        <div class="form-group">
                            <label for="year">所属年份：</label>
                            <select class="form-control father_select year_select" name="year" id="year">
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-1">
                        <div class="form-group">
                            <label for="month">所属月份：</label>
                            <select class="form-control son_select month_select" name="month" id="month" disabled="disabled">
                                <option value="">--请选择--</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-2" style="margin-top: 25px">
                        <button type="button" id="findbtn" class="btn btn-success">查询</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">客户资源表</div>
            <div class="surface_table" id="table">
                <div class="table-head">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th colspan="15" style="text-align: center" class="shouru">收入</th>
                                <th colspan="17" style="text-align: center" class="daikuancb">带宽成本</th>
                                <th colspan="13" style="text-align: center" class="chuanshucb">传输成本</th>
                                <th colspan="4" style="text-align: center" class="fanhuancb">返款成本</th>
                            </tr>
                            <tr class="table-h">
                                <!--收入-->
                                <th>业务区域</th>
                                <th>业务板块</th>
                                <th>运营商类型</th>
                                <th>客户名称</th>
                                <th>对应公司名称</th>
                                <th>是否需要开票</th>
                                <th>开始日期</th>
                                <th>结束日期</th>
                                <th>天数</th>
                                <th>数量</th>
                                <th>单价</th>
                                <th>金额</th>
                                <th>调整</th>
                                <th>调整日期</th>
                                <th>应收</th>
                                <!--带宽成本-->
                                <th>资源供应商名称</th>
                                <th>对应内部公司</th>
                                <th>资源所属地</th>
                                <th>属性</th>
                                <th>计费日期</th>
                                <th>开始日期</th>
                                <th>结束日期</th>
                                <th>天数</th>
                                <th>数量</th>
                                <th>单价</th>
                                <th>金额</th>
                                <th>调整</th>
                                <th>调整日期</th>
                                <th>应付</th>
                                <th>是否需要开票</th>
                                <th>使用百分比</th>
                                <th>实际成本</th>
                                <!--传输成本-->
                                <th>传输供应商</th>
                                <th>对应内部公司</th>
                                <th>传输路径</th>
                                <th>开始日期</th>
                                <th>结束日期</th>
                                <th>天数</th>
                                <th>数量</th>
                                <th>单价</th>
                                <th>金额</th>
                                <th>调整</th>
                                <th>调整日期</th>
                                <th>应付</th>
                                <th>VLAN号</th>
                                <!--返还成本-->
                                <th>实际成本</th>
                                <th>调整</th>
                                <th>调整日期</th>
                                <th>应付</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="table-body">
                    <table class="table table-hover table-bordered">

                    </table>
                </div>
            </div>
        </div>
        <script src="__MYJS__/main.min.js"></script>
        <script src="__MYJS__/main.js"></script>
        <script src="__MYJS__/validator.js"></script>
        <script src="__MYJS__/table.js"></script>
        <script>
            var zdytable = new window.zdytable();
            var cbsrlist;
            // 表格布局
            function table(datas) {
                for (var i in datas) {
                    tablepj(datas[i].khzy, i, ".khzy")
                    tablepj(datas[i].dkzy, i, ".dkzy")
                    tablepj(datas[i].cszy, i, ".cszy")
                    tablepj(datas[i].fkcb, i, ".fkcb")
                }
                tableCount()
            }
            // 表格拼接
            function tablepj(self, khmc, columnname) {
                $(self).each(function (key, val) {
                    var khzy = val;
                    var trs =$("#table").find("." + khmc).find("tr");
                    $(trs[key]).find(columnname).each(function () {
                        var name = $(this).attr("data-name");
                        $(this).html(khzy[name])
                    })
                })
            }
            // 表格总计
            function tableCount() {
                // 循环统计行数
                $(".counttr").each(function () {
                    var name = $(this).attr("data-name");
                    var khmc = $(this).attr("data-khmc");
                    count(this, khmc, ".khzycount", ".khzy")
                    count(this, khmc, ".dkzycount", ".dkzy")
                    count(this, khmc, ".cszycount", ".cszy")
                    count(this, khmc, ".fkcbcount", ".fkcb")
                });
                zdytable.initDom();
            }
            // 总计计算
            function count(self, khmc, countval, columnname) {
                $(self).find(countval).each(function () {
                    var count = this;
                    var num = 0;
                    // 循环匹配之前对应的列项
                    $("#table").find("." + khmc).find(columnname).each(function () {
                        if ($(this).attr("data-name") == $(count).attr("data-name")) {
                            num += $(this).html() * 1;
                            $(count).html(num)
                        }
                    })
                })
            }

            function find(obj) {
                $.ajax({
                    url: "{:U('get_zb_data')}",
                    type: 'GET',
                    data: obj,
                    success: function (result) {
                        $("#table .table-body tbody").remove();
                        for (var i in result) {
                            //拼接表体
                            $(".table-body .table").append("<tbody class='" + i + "'></tbody>")
                            var arr = [];
                            arr.push(result[i].cszy.length)
                            arr.push(result[i].dkzy.length)
                            arr.push(result[i].fkcb.length)
                            arr.push(result[i].khzy.length)
                            arr.max();
                            for (var j = 0; j < arr.max(); j++) {
                                //循环拼接最大tr行数
                                $(".table-body .table>." + i).append("<tr>" +
                                    "<td class='khzy' data-name='ywqy'></td>" +
                                    "<td class='khzy' data-name='ywbk'></td>" +
                                    "<td class='khzy' data-name='yyslx'></td>" +
                                    "<td class='khzy' data-name='khmc'></td>" +
                                    "<td class='khzy' data-name='dynbgs'></td>" +
                                    "<td class='khzy' data-name='kp'></td>" +
                                    "<td class='khzy' data-name='ktrq'></td>" +
                                    "<td class='khzy' data-name='jsrq'></td>" +
                                    "<td class='khzy' data-name='ts_sum'></td>" +
                                    "<td class='khzy' data-name='gs'></td>" +
                                    "<td class='khzy' data-name='dj'></td>" +
                                    "<td class='khzy' data-name='je'></td>" +
                                    "<td class='khzy' data-name='tz'></td>" +
                                    "<td class='khzy' data-name='tzrq'></td>" +
                                    "<td class='khzy' data-name='ys'></td>" +

                                    "<td class='dkzy' data-name='dkgys' style='min-width:130px'></td>" +
                                    "<td class='dkzy' data-name='dynbgs'></td>" +
                                    "<td class='dkzy' data-name='ssd'></td>" +
                                    "<td class='dkzy' data-name='sx'></td>" +
                                    "<td class='dkzy' data-name='jfrq'></td>" +
                                    "<td class='dkzy' data-name='ktrq'></td>" +
                                    "<td class='dkzy' data-name='jsrq'></td>" +
                                    "<td class='dkzy' data-name='ts_sum'></td>" +
                                    "<td class='dkzy' data-name='gs'></td>" +
                                    "<td class='dkzy' data-name='dj'></td>" +
                                    "<td class='dkzy' data-name='je'></td>" +
                                    "<td class='dkzy' data-name='tz'></td>" +
                                    "<td class='dkzy' data-name='tzrq'></td>" +
                                    "<td class='dkzy' data-name='ys'></td>" +
                                    "<td class='dkzy' data-name='kp'></td>" +
                                    "<td class='dkzy' data-name='sy'></td>" +
                                    "<td class='dkzy' data-name='sjcb'></td>" +

                                    "<td class='cszy' data-name='csgys'></td>" +
                                    "<td class='cszy' data-name='dynbgs'></td>" +
                                    "<td class='cszy' data-name='cslj'></td>" +
                                    "<td class='cszy' data-name='ktrq'></td>" +
                                    "<td class='cszy' data-name='jsrq'></td>" +
                                    "<td class='cszy' data-name='ts_sum'></td>" +
                                    "<td class='cszy' data-name='gs'></td>" +
                                    "<td class='cszy' data-name='dj'></td>" +
                                    "<td class='cszy' data-name='je'></td>" +
                                    "<td class='cszy' data-name='tz'></td>" +
                                    "<td class='cszy' data-name='tzrq'></td>" +
                                    "<td class='cszy' data-name='ys'></td>" +
                                    "<td class='cszy' data-name='vlan'></td>" +

                                    "<td class='fkcb' data-name='yfk'></td>" +
                                    "<td class='fkcb' data-name='tz'></td>" +
                                    "<td class='fkcb' data-name='tzrq'></td>" +
                                    "<td class='fkcb' data-name='ys'></td>" +
                                    "</tr>")
                            }
                            // 凭借统计一栏
                            $(".table-body .table>." + i).append("<tr class='counttr' data-khmc='" + i +
                                "'>" +
                                "<td colspan='9' style='text-align: center'>总计</td>" +
                                "<td data-name='gs' class='khzycount'></td>" +
                                "<td></td>" +
                                "<td data-name='je' class='khzycount'></td>" +
                                "<td></td>" +
                                "<td></td>" +
                                "<td data-name='ys' class='khzycount'></td>" +

                                "<td colspan='8' style='text-align: center'>总计</td>" +
                                "<td data-name='gs' class='dkzycount'></td>" +
                                "<td></td>" +
                                "<td data-name='je' class='dkzycount'></td>" +
                                "<td></td>" +
                                "<td></td>" +
                                "<td data-name='ys' class='dkzycount'></td>" +
                                "<td></td>" +
                                "<td></td>" +
                                "<td></td>" +
                                "<td colspan='6' style='text-align: center'>总计</td>" +
                                "<td data-name='gs' class='cszycount'></td>" +
                                "<td></td>" +
                                "<td data-name='je' class='cszycount'></td>" +
                                "<td></td>" +
                                "<td></td>" +
                                "<td data-name='ys' class='cszycount'></td>" +
                                "<td></td>" +
                                "<td data-name='yfk' class='fkcbcount'></td>" +
                                "<td data-name='tz' class'fkcbcount'></td>" +
                                "<td></td>" +
                                "<td data-name='ys' class='fkcbcount'></td>" +
                                "</tr>")
                        }
                        table(result)
                    }
                });
            }
            find({});
            $("#findbtn").on("click", function () {
                find({
                    khmc: $("#khmc").val(),
                    dynbgs: $("#dynbgs").val(),
                    year: $("#year").val(),
                    month: $("#month").val()
                });
            })
        </script>
    </body>

</block>

</html>